  <!-- 机构管理 -->
<template>
  <div class="lfmain">
    <div class="left-tree main-body">
      <el-input placeholder="输入机构名称过滤" v-model="filterText"></el-input>

      <el-tree
        class="filter-tree"
        :data="orgTree"
        node-key="id"
        @node-click="treeClick"
        current-node-key="root"
        :expand-on-click-node="false"
        :highlight-current="true"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
      ></el-tree>
    </div>
    <div class="right-list   main-body">
      <header class="main-body-search">
        <el-form :model="search" @submit.native.prevent>
          <el-row :gutter="50" type="flex" justify="space-between">
          <el-col :span="12">
            <el-button type="primary" @click="showDetail({})" icon="el-icon-plus">新建机构</el-button>
          </el-col>
          <el-col :span="12" style="text-align: right;">
            <el-form-item label class="nja-form-line">
              <el-input
              style="width: 350px;"
                v-model.trim="search.fullName"
                placeholder="机构名称或统一信用代码证"
                clearable
                @keyup.enter.native="searchHandle"
              >
              <div  slot="prefix" style="height: 100%;width: 100%;display: flex;justify-content: center;align-items: center;">
                <i class="el-icon-search"></i>
              </div>
              <el-button type="primary" slot="append" @click="searchHandle">查询</el-button>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>

        </el-form>
      </header>
      <el-main class="main-body-table">
        <div class="table-shadow"></div>
        <el-table :data="localData" stripe style="width: 100%" height="calc(100vh - 200px)">
          <el-table-column prop="fullName" label="机构名称" align="center" width="180"></el-table-column>
          <el-table-column prop="creditCode" label="社会统一信用码" align="center"></el-table-column>
          <el-table-column prop="zoneCode" label="行政区划" align="center"></el-table-column>
          <el-table-column prop="orgClassification" label="机构分类" align="center"></el-table-column>
          <el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
          <el-table-column label="操作" fixed="right" align="center" width="160px">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="showDetail(scope.row)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                v-if="scope.row.id != 'root'"
                @click="deleteRow(scope.row)"
              >删除</el-button>
            </template>
          </el-table-column>
          <template #empty>
            <el-empty description="暂无数据"></el-empty>
          </template>
        </el-table>
        <!--工具条-->
        <!-- <el-pagination
        class="main-body-table-page"
        layout="total, prev, pager, next, jumper"
        @current-change="handleCurrentChange"
        :current-page="search.current"
        :page-size="search.size"
        :total="search.total"
        ></el-pagination>-->
      </el-main>
    </div>

    <el-dialog
      :title="form.id ? '编辑机构' : '新增机构'"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      center
      v-dialogDrag
      custom-class="mydialog"
      width="800px"
    >
      <el-form ref="form" class="formlayout" :model="form" label-width="90px" label-position="left">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="机构名称" prop="fullName" required :rules="rules">
              <el-input v-model="form.fullName" placeholder="请输入机构名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构简称" prop="shortName">
              <el-input v-model="form.shortName" placeholder="请输入机构简称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" v-if="form.id != 'root'">
            <el-form-item label="上级机构" prop="parentId" required :rules="rules">
              <el-cascader
                style="width: 100%;"
                v-model="form.parentId"
                :options="orgTree"
                :props="defaultProps"
                clearable
              ></el-cascader>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="机构编码" prop="orgCode" required :rules="rules">
              <el-input v-model="form.orgCode" placeholder="请输入机构编码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="统一信用码"
              prop="creditCode"
              required
              :rules="rules"
              label-width="110px"
            >
              <el-input v-model="form.creditCode" placeholder="请输入社会统一信用码"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行政区划" prop="zoneCode">
              <el-select style="width: 100%" v-model="form.zoneCode">
                <el-option v-for="(item, i) in area" :label="item.label" :value="item.label" :key="i"></el-option>
                </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="机构分类" prop="orgClassification">
              <el-select
                v-model="form.orgClassification"
                style="width: 100%;"
                placeholder="请选择机构分类"
              >
                <el-option :label="r.label" :value="r.label" v-for="(r, i) in orgType" :key="i"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生产经营场所地址" prop="address" label-width="130px">
              <el-input v-model="form.address" placeholder="请输入生产经营场所地址"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人" prop="contactName">
              <el-input v-model="form.contactName" placeholder="请输入联系人"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人电话" prop="contactPhone">
              <el-input v-model="form.contactPhone" placeholder="请输入联系人电话"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注" prop="remarks">
              <el-input
                v-model="form.remarks"
                type="textarea"
                :autosize="{ minRows: 2, maxRows: 4}"
                placeholder="请输入备注"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" style="width: 120px;" @click="saveHandle">保存</el-button>
        <el-button style="width: 120px;" @click="dialogVisible = false">取消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  SelectList,
  DeleteHandle,
  InsertHandle,
  UpdateHandle
} from '@/api/admin/org'
import {toTree} from '@/util/common.js'
export default {
  data() {
    return {
      dialogVisible: false,
      search: {
        current: 1,
        size: 20,
        total: 0,
        fullName: ''
      },
      filterText: '',
      orgTree: [],
      defaultProps: {
        emitPath: false,
        checkStrictly: true,
        children: 'children',
        label: 'fullName',
        value: 'id'
      },
      currentOrg: null,
      types: {},
      area: this.$dict.get('area'),
      orgType: this.$dict.get('orgType'),
      rules: [{ required: true, message: '必填' }],
      form: {
        fullName: '',
        orgCode: '',
        parentId: ''
      },
      tableData: []
    }
  },
  computed: {
    localData() {
      let data = this.tableData
      if (this.currentOrg) {
        data = data.filter((d) => d.parentId == this.currentOrg)
      }
      if (this.search.fullName) {
        data = data.filter((d) => d.fullName.indexOf(this.search.fullName) != -1 || d.creditCode.indexOf(this.search.fullName) != -1)
      }
      return data
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  methods: {
    treeClick(org) {
      this.currentOrg = org.id
    },
    filterNode(value, data) {
      if (!value) return true
      return data.fullName.indexOf(value) !== -1
    },
    showDetail(row) {
      this.form = Object.assign(
        {
          fullName: '',
          orgCode: '',
          parentId: ''
        },
        row
      )
      if (!this.form.parentId && this.currentOrg) {
        this.form.parentId = this.currentOrg
      }
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.form.clearValidate()
      })
    },
    saveHandle() {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          // 保存
          let params = Object.assign({}, this.form)
          let API = InsertHandle
          if (params.id) {
            API = UpdateHandle
          }
          delete params.lastUpdateTime
          delete params.createTime
          API(params).then((res) => {
            console.log('RegisterRequest', res)
            if (res.code === 20000) {
              this.$message({
                type: 'success',
                message: '操作成功'
              })
              this.dialogVisible = false
              this.loadData()
            }
          })
        }
      })
    },
    deleteRow(row) {
      console.log(row)
      this.$confirm('确定删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        DeleteHandle({ id: row.id }).then((res) => {
          if (res.code === 20000) {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.loadData()
          }
        })
      })
    },
    handleCurrentChange(val) {
      this.search.current = val
      this.loadData()
    },
    searchHandle() {
      // this.loadData()
    },
    loadData() {
     let params =  Object.assign({}, this.search)
      if (!params.fullName) {
          delete params.fullName
      }
      SelectList(params)
        .then((res) => {
          console.log('success:', res)
          this.tableData = res.data
          this.orgTree = toTree(this.tableData)
          this.currentOrg = 'root'
          console.log('this.orgTree', this.orgTree)
        })
        .catch((err) => {
          console.log('err:', err)
        })
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style lang="scss" scoped>
.tableimg {
  width: 45px;
}
.formlayout {
  padding: 20px 40px;
}
.lfmain {
  display: flex;
  flex-direction: row;
}
.left-tree {
  width: 300px;
  margin-right: 15px;
  padding: 20px;
  box-sizing: border-box;
  background-color: #fff;
  .filter-tree {
    margin-top: 10px;
    height: calc(100vh - 230px);
    overflow-y: auto;
  }
}
.right-list {
  width: calc(100% - 315px);
  height: 100%;
}
</style>
